﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>


    <!-- 引入Vue和Element Plus -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>

    <style>

        /* 添加页面背景色 */
        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

        .el-table {
            background-color: white; /* 表格白底，与背景色区分 */
        }

        a {
            text-decoration: none;
        }

    </style>

</head>
<body>

    <!-- Vue 挂载点 -->
    <div id="app">
        <span>您在做的业务是-人力资源-调动管理-调动登记列表</span>

        <el-table :data="tableData" style="width: 100%">
         
            <el-table-column prop="first_kind_name" label="I级机构" width="150"></el-table-column>
            <el-table-column prop="second_kind_name" label="II级机构" width="150"></el-table-column>
            <el-table-column prop="third_kind_name" label="III级机构" width="150"></el-table-column>
            <el-table-column prop="salary_standard_name" label="薪酬标准" width="150"></el-table-column>
            <el-table-column prop="human_name" label="姓名" width="150"></el-table-column>
            <el-table-column  label="变更" >

                <template #default="scope">

                    <a :href="`/DDDJ/Update/?id=${scope.row.huf_id}`">
                        调动
                    </a>

                </template>

            </el-table-column>

        </el-table>

        <!-- 分页控件 -->
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1, 2, 3, 4]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalCount">
        </el-pagination>


    </div>



    <script type="text/javascript">
        const { createApp, ref, onMounted,computed,ElMessage } = Vue;
        const app = createApp({
            setup() {
                const tableData = ref([]);


                const totalCount = ref(0);
                const currentPage = ref(1);
                const pageSize = ref(2);


             // 从sessionStorage获取查询结果
                function loadResults(){
                      const results = sessionStorage.getItem('searchResults');
                    const count = sessionStorage.getItem('totalCount');
                    const params = sessionStorage.getItem('searchParams');

                    if (results) {
                        tableData.value = JSON.parse(results);
                        totalCount.value = parseInt(count) || 0;

                        if (params) {
                            const searchParams = JSON.parse(params);
                            currentPage.value = searchParams.PageNumber || 1;
                            pageSize.value = searchParams.PageSize || 10;
                        }
                    }
                }



                 // 处理分页大小变化
                const handleSizeChange = async(newSize) => {
                    pageSize.value = newSize;
                    await loadPageData();
                };

                // 处理当前页变化
                const handleCurrentChange = async(newPage) => {
                    currentPage.value = newPage;
                    await loadPageData();
                };


                // 加载分页数据
                const loadPageData = async() => {
                    const params = sessionStorage.getItem('searchParams');
                    if (!params) return;

                    const searchParams = JSON.parse(params);
                    searchParams.PageNumber = currentPage.value;
                    searchParams.PageSize = pageSize.value;


                        const response = await axios.post('/DDDJ/Search', searchParams);

                        if (response.data && response.data.items) {
                            tableData.value = response.data.items;
                            totalCount.value = response.data.totalCount;
                            currentPage.value = response.data.PageNumber;  //大小写的记录
                            pageSize.value = response.data.PageSize; //大小写的记录

                            // 更新sessionStorage中的结果
                            sessionStorage.setItem('searchResults', JSON.stringify(response.data.items));
                            sessionStorage.setItem('totalCount', response.data.totalCount);
                        }

                };


                loadResults();


 


                return {
                    tableData,
                    totalCount,
                    currentPage,
                    pageSize,
                    handleSizeChange,
                    handleCurrentChange,
                };


            }
        });


        app.use(ElementPlus).mount('#app');

    </script>
</body>
</html>   